<template>
  <div class="studyBox">
    <!-- 试题部分 -->
    <div class="left">
      <canvas class="canvas" width="1000" height="500"></canvas>

    </div>
    <!-- 操作部分 -->
    <div class="right">
      <div class="rightItem">
        <el-button type="primary" @click="get20Arr">20 内综合</el-button>
        <el-button type="primary" @click="get50Arr">50 内综合</el-button>
        <el-button type="primary" @click="get100Arr">100 内综合</el-button>
      </div>
      <div class="rightItem">
        <el-button type="primary" @click="getStudyArr">试 题</el-button>
        <el-button type="success" @click="getResult">答 案</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { getStudyTYT2 } from '@/components/game/study/study.js'

export default {
  data() {
    return {
      gridSize: 200, // 定义变量保存小方格的尺寸
      ufuncArr: ['+', '-'], // 运算法则
      isShowResult: false, // 是否显示答案
      studyType: [5, 20],

      topPostion: [], // 上面数据的定位
      bottomPostion: [], // 下面数据的定位
      // studyAll: [], // 填一填 部分习题数组 1
      studyTop: [], // 上面的试题
      studyBottom: [], // 下面的试题

    }
  },
  created() {
    // let div = document.getElementsByClassName('left')
    // console.log('######', div[0].offsetWidth, div[0].offsetHeight)
    // div[0].style.transform = 'rotate(-90deg)'
  },
  computed: {},
  mounted() {
    this.getStudyAll()
    this.getCanvas() // 绘制棋盘
  },
  methods: {
    // 绘制棋盘
    getCanvas() {
      let oCanvas = document.getElementsByClassName('canvas')[0] // 拿到canvas
      let oCtx = oCanvas.getContext('2d') // 从canvas中拿到绘图工具
      let gridSize = this.gridSize // 定义变量保存小方格的尺寸
      // 拿到canvas的宽高
      let canvasWidth = oCtx.canvas.width
      let canvasHeight = oCtx.canvas.height
      // 计算在垂直方向和水平方向可以绘制多少条横线
      this.row = Math.floor(canvasHeight / gridSize) - 1
      this.col = Math.floor(canvasWidth / gridSize)
      // 绘制竖直线 按试题个数平均分
      for (let i = 1; i <= this.col; i++) {
        if (i == 1) {
          oCtx.beginPath()
          oCtx.moveTo(i * (gridSize / 2) - 0.5, 0)
          oCtx.lineTo(i * (gridSize / 2) - 0.5, canvasHeight)
          oCtx.strokeStyle = 'blue'
          oCtx.stroke()
          this.topPostion.push([i * (gridSize / 2) - 0.5, 80])
          this.bottomPostion.push([i * (gridSize / 2) - 0.5, canvasHeight - 80])
        } else {
          oCtx.beginPath()
          oCtx.moveTo((i - 0.5) * gridSize - 0.5, 0)
          oCtx.lineTo((i - 0.5) * gridSize - 0.5, canvasHeight)
          oCtx.strokeStyle = 'red'
          oCtx.stroke()
          this.topPostion.push([(i - 0.5) * gridSize - 0.5, 80])
          this.bottomPostion.push([(i - 0.5) * gridSize - 0.5, canvasHeight - 80])
        }
      }
      // 绘制竖直线 - 上面
      oCtx.beginPath()
      oCtx.moveTo(0, 80)
      oCtx.lineTo(canvasWidth, 80)
      oCtx.strokeStyle = '#666'
      oCtx.stroke()
      // 绘制竖直线 - 下面
      oCtx.beginPath()
      oCtx.moveTo(0, canvasHeight - 80)
      oCtx.lineTo(canvasWidth, canvasHeight - 80)
      oCtx.strokeStyle = '#666'
      oCtx.stroke()
      // 试题的区域
      this.getStudyBox()
    },
    getStudyBox() {
      // console.log('######', this.topPostion, this.bottomPostion)
      this.topPostion.forEach(item => {
        let oCanvas = document.getElementsByClassName('canvas')[0] // 拿到canvas
        let oCtx = oCanvas.getContext('2d') // 从canvas中拿到绘图工具
        oCtx.beginPath()
        oCtx.moveTo(item[0], item[1]) // 路径的起点
        oCtx.lineTo(item[0] + 70, item[1]) // 经过的点
        oCtx.lineTo(item[0] + 70, 30)
        oCtx.lineTo(item[0] - 70, 30)
        oCtx.lineTo(item[0] - 70, item[1])
        oCtx.lineTo(item[0], item[1])
        oCtx.strokeStyle = '#666'
        oCtx.stroke()
        oCtx.font = '15px console'
        oCtx.fillText('@@@@@@@', item[0] - 50, item[1] - 20)
      })
      this.bottomPostion.forEach(item => {
        let oCanvas = document.getElementsByClassName('canvas')[0] // 拿到canvas
        let oCtx = oCanvas.getContext('2d') // 从canvas中拿到绘图工具
        oCtx.beginPath()
        oCtx.moveTo(item[0], item[1]) // 路径的起点
        oCtx.lineTo(item[0] + 70, item[1]) // 经过的点
        oCtx.lineTo(item[0] + 70, item[1] + 50)
        oCtx.lineTo(item[0] - 70, item[1] + 50)
        oCtx.lineTo(item[0] - 70, item[1])
        oCtx.lineTo(item[0], item[1])
        oCtx.strokeStyle = '#666'
        oCtx.stroke()
        oCtx.font = '15px console'
        oCtx.fillText('@@@@@@@', item[0] - 50, item[1] + 30)
      })
    },
    getStudyAll() {
      let studyAll = getStudyTYT2(this.studyType, 9)
      console.log('EEEEEEE', studyAll)
      studyAll.forEach(item => {
        this.studyTop.push(item.slice(0, 3))
      })
      console.log('RRRRRRRRRR', this.studyTop)


    },
    // 20 内加减法 点击事件
    get20Arr() {
      this.studyType = [5, 20]
      this.isShowResult = false
      this.getStudyAll()
    },
    // 50 内加减法 点击事件
    get50Arr() {
      this.studyType = [20, 50]
      this.isShowResult = false
      this.getStudyAll()
    },
    // 100 内加减法 点击事件
    get100Arr() {
      this.studyType = [30, 100]
      this.isShowResult = false
      this.getStudyAll()
    },
    // 试题 点击事件
    getStudyArr() {
      this.isShowResult = false
    },
    // 答案 点击事件
    getResult() {
      this.isShowResult = true
    }
  }
}
</script>

<style scoped>
.studyBox {
  display: flex;
}
.left {
  width: 1050px;
  height: 700px;
  border: 1px solid #666;
  display: flex;
  flex-direction: column;
  /* justify-content: space-between; */
  margin-top: 20px;
  margin-left: 350px;
  position: relative;
  /* box-sizing: border-box; */
}
.canvas {
  background: #fee8c5;
  /* color: white; */
  border: 1px solid #666;
  position: absolute;
}
.right {
  width: 500px;
  height: 500px;
  border: 1px solid green;
  text-align: center;
  margin-top: 20px;
  margin-left: 400px;
  font-size: 25px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.rightItem {
  width: 500px;
  height: 120px;
  border: 1px solid red;
  line-height: 120px;
}
</style>
